<template>
  <div class="fire-safety-inspect">
    <div style="display: flex;">
      <van-dropdown-menu style="width: 30vw;" :overlay="false" :close-on-click-overlay="true" :close-on-click-outside="true">
        <van-dropdown-item ref="typeRef" :title="typeFilter.curType.value == '-1' ? '选择位置' : typeFilter.curType.name" @opened="relocationFn">
          <template #default>
            <van-radio-group v-model="typeFilter.curType" @change="changeTypeFn">
              <template v-for="typeItem in typeFilter.data">
                <van-radio style="margin-bottom: 2vh" :name="typeItem" shape="square">{{ typeItem.name }}</van-radio>
              </template>
            </van-radio-group>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-field style="width: 65vw" label-width="0" v-model="queryParam.keyLike" placeholder="请输入编号关键字">
        <template #button>
          <div style="display: flex;align-items: center">
            <van-button type="primary" size="small" @click="filterFireSafetyEquipmentDataFn">查询</van-button>
            <van-icon style="margin-left: 3vw;" size="1.7rem" name="scan" @click.stop="openScanWinFn"></van-icon>
          </div>
        </template>
      </van-field>
    </div>

    <!-- 巡检对象 -->
    <div style="padding: 1vh 1vw;margin-top: 2vh;">
      <div style="display: flex;justify-content: space-between;align-items: center; border-bottom: #1989fa 1px solid;">
        <div>
          <span style="color: #1989fa;font-size: 1.2rem;">{{ energyMeterTypeEnumFn(inspection.type) }}</span>
        </div>
        <div>
          <span style="color: #6e4d23;font-size: 1.2rem;">{{ inspection.equNo }}</span>
        </div>
      </div>
      <div style="padding: 1vh 1vw; margin-top: 2vh; border-bottom: #1989fa 1px solid;">
        <van-radio-group direction="horizontal" v-model="inspection.status" @change="changeStatusFn">
          <template v-for="sk in Object.keys(INSPECT_STATUS)">
            <van-radio checked-color="#FA5D19" :name="Number(sk)">{{ INSPECT_STATUS[sk] }}</van-radio>
          </template>
        </van-radio-group>
      </div>
      <div style="margin-top: 1vh; border-bottom: #1989fa 1px solid;">
        <div style="margin-bottom:0.5vh;display: flex;justify-content: center"><span style="font-size: 1rem">巡检拍照</span></div>
        <div style="display: flex;flex-wrap: wrap;align-items: center">
          <view-pic-thumb v-if="inspection.pics !== SPLIT_BLANK" :original-data="inspection" :first-flag="false" :size="{width:'20vw',height:'20vw'}" :del-flag="true" @view="viewPicFn"></view-pic-thumb>
          <van-uploader v-model="pic.files" multiple :max-count="5"></van-uploader>
        </div>
      </div>
      <div style="border-bottom: #1989fa 1px solid;">
        <van-field type="textarea" v-model="inspection.optRemark" label="巡检备注" clearable autosize maxlength="50" show-word-limit rows="3">
        </van-field>
      </div>
      <div style="margin-top: 1vh; display: flex;justify-content:center;align-items: center;">
        <van-button type="danger" size="small" @click="() => closeFn()">取消</van-button>
        <van-button style="margin-left: 10vw;" type="warning" size="small" @click="confirmFn">确认巡检</van-button>
      </div>
    </div>

    <!-- 设备列表弹窗 -->
    <van-popup v-model="equPop.show" position="bottom" get-container="body">
      <van-picker show-toolbar value-key="no" :columns="equPop.data" @confirm="selectEquFn"></van-picker>
    </van-popup>
  </div>
</template>

<script>
import {
  ENERGY_METER_TYPE,
  energyMeterTypeEnumFn, ENTRY_LINE,
  INSPECT_STATUS,
  inspectStatusEnumFn,
  SPLIT_BLANK,
  SPLIT_COMMA
} from "@/api/enum";
import {
  filterFireSafetyEquipmentData, fireSafetyInspection, loadFireSafetyEquipmentDetail,
} from "@/views/energy-consumption/energy-consumption";
import { loadPicThumb, uploadPic} from "@/components/file-upload/upload_file";
import ViewPicThumb from "@/components/view-pic-thumb";

export default {
  name: "fire-safety-inspect",
  components: {ViewPicThumb},
  props: {
    originalInspection: {
      type: Object,
      default() {
        return {
          id: 0
        }
      }
    },
  },
  data() {
    return {
      SPLIT_BLANK, INSPECT_STATUS,

      /* 查询 */
      queryParam: {
        type: "-1",
        keyLike: SPLIT_BLANK,
      },

      /* 车间类型 */
      typeFilter: {
        curType: {
          name: "全部",
          value: "",
        },
        data: [],
      },

      /* 设备列表 */
      equPop: {
        show: false,
        data: []
      },

      /* 巡查对象 */
      inspection: {
        id: 0,
        type: "-1",
        equId: 0,
        equNo: SPLIT_BLANK,
        optId: 0,
        optName: SPLIT_BLANK,
        optAt: SPLIT_BLANK,
        pics: SPLIT_BLANK,
        optRemark: "正常",
        thumbs: [],
        picObjs: [],
        status: 3,
      },

      /* 图片相关 */
      pic: {
        type: "XFAQXJ",
        thumbs: [],
        files: [],
      }
    }
  },
  mounted() {
    const that = this;
    that.initFn();
  },
  methods: {
    energyMeterTypeEnumFn,

    /* 初始化 */
    initFn() {
      const that = this;
      that.typeFilter.data.splice(0, that.typeFilter.data.length);
      that.typeFilter.data.push(that.typeFilter.curType);
      Object.keys(ENERGY_METER_TYPE).forEach(k => {
        that.typeFilter.data.push({
          name: ENERGY_METER_TYPE[k],
          value: String(k),
        });
      });

      if(that.originalInspection.id > 0) {
        Object.keys(that.inspection).filter(k => k !== "thumbs").forEach(k => {
          let v = that.originalInspection[k];
          if(Array.isArray(v)) {
            that.inspection[k].splice(0, that.inspection[k].length);
            v.forEach(item => {
              that.inspection[k].push(item);
            });
          } else {
            that.inspection[k] = that.originalInspection[k];
          }
        });
      }
    },

    /* 下拉菜单重定位 */
    relocationFn() {
      const that = this;
      that.$nextTick(() => {
        that.$refs.typeRef.$el.querySelector(".van-dropdown-item--down").style.top = "7vh";   //7vh调试的
      });
    },

    /* 更改选择类型 */
    changeTypeFn(typeItem) {
      const that = this;
      that.queryParam.type = typeItem.value;
    },
    /* 更改 */
    changeStatusFn(sk) {
      const that = this;
      console.log(sk)
      that.inspection.optRemark = inspectStatusEnumFn(sk)/* + ENTRY_LINE + that.inspection.optRemark*/;
    },

    /* 加载设备 */
    filterFireSafetyEquipmentDataFn() {
      const that = this;
      if(that.typeFilter.value == "-1") {
        that.$toast.fail("请先选择位置");
        return;
      }
      that.equPop.data.splice(0, that.equPop.data.length);
      filterFireSafetyEquipmentData(that.queryParam, resData => {
        if(resData.code || resData.code == 0) {
          that.$toast.fail(resData.msg);
          return;
        }
        resData.forEach(equ => {
          that.equPop.data.push(equ);
        });
        if(that.equPop.data.length > 0) {
          that.equPop.show = true;
        }
      })
    },

    /* 打开扫码窗 */
    openScanWinFn() {
      const that = this;
      const zyHmsScan = window.api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          if(ret.result.indexOf("41,") === 0) {
            let equId = ret.result.substr(3);
            loadFireSafetyEquipmentDetail({
              equId: equId
            }, resData => {
              if(resData.code || resData.code === 0) {
                that.$toast.fail(resData.msg);
                return;
              }
              that.selectEquFn(resData);
            });
          } else {
            that.$toast.fail("请扫消防设备码")
          }
        }
      });
    },

    /* 选中设备 */
    selectEquFn(equ) {
      console.log(equ);
      const that = this;
      that.inspection.type = equ.type;
      that.inspection.equId = equ.id;
      that.inspection.equNo = equ.no;
      that.equPop.show = false;
    },


    /* 关闭 */
    closeFn(reload) {
      const that = this;
      that.$emit("close", reload);
    },
    /* 确认巡查 */
    confirmFn() {
      const that = this;

      if(that.inspection.equId === 0) {
        that.$toast.fail("必须选择一个消防设备");
        return;
      }
      if(that.inspection.optRemark === SPLIT_BLANK) {
        that.$toast.fail("必须输入巡检备注");
        return;
      }

      that.$toast.loading({
        message: '执行中...',
        forbidClick: true,
        loadingType: 'spinner',
      });

      let pics = that.inspection.pics.split(SPLIT_COMMA).filter(pic => pic !== SPLIT_BLANK);
      if(that.pic.files.length > 0) {   //先上传再确认保存
        that.uploadPicFn(that.pic.files, resData => {
          pics.push(resData);
          that.pic.files.splice(0, that.pic.files.length);
          that.inspection.pics = pics.join(SPLIT_COMMA);
          that.confirmFn();
        });
        return;
      }

      if(pics.length === 0) {
        that.$toast.fail("必须拍照上传");
        return;
      }

      fireSafetyInspection(that.inspection, resData => {
        if(resData.code || resData.code === 0) {
          that.$toast.fail(resData.msg);
          return;
        }
        that.$toast.success("巡检成功");
        that.closeFn(true);
      })
    },

    /* 上传图片 */
    uploadPicFn(files, callback) {
      const that = this;
      if(files.length <= 0) {
        that.$toast("没有待上传的图片");
        return;
      }
      uploadPic(that, that.pic.type, files, resData => {
        if(callback) {
          callback(resData);
        }
      });
    },

    /* 查看图片 */
    viewPicFn(row) {
      const that = this;
      that.$emit("view", row);
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-dropdown-menu {
  .van-dropdown-item {
    width: 30vw;
    left: 2vw;
  }
}

.fire-safety-inspect {
  //height: 40vh;
}
</style>